<template>
  <div class="login">
    <div class="container">
      <h1>锋团运营平台</h1>
      <qf-form :formItem="formItem" :formBtns="formBtns"></qf-form>
    </div>
  </div>
</template>

<script>
// import { postLoginMbApi } from "@/api/login";

import { mapActions } from "vuex";

export default {
  data() {
    return {
      // 表单配置
      formItem: [
        // ...
        {
          field: "question",
          rules: [
            { required: true, message: "请选择密保问题", trigger: "change" },
          ],

          placeholder: "请选择密保问题",
          type: "select",
          payload: [
            { label: "你大爷名字", value: "你大爷名字" },
            { label: "您其中一位老师的名字", value: "您其中一位老师的名字" },
            { label: "你初念的名字", value: "你初念的名字" },
          ],
        },
        {
          field: "answer",
          rules: [
            { required: true, message: "密保答案必须", trigger: "blur" },
            { min: 2, max: 10, message: "至少2~10个字符", trigger: "blur" },
          ],

          placeholder: "请输入密保答案",
          icon: "el-icon-user-solid",
          type: "input",
        },
        {
          rules: [
            { required: true, message: "用户名必须", trigger: "blur" },
            { min: 3, max: 5, message: "至少3~5个字符", trigger: "blur" },
          ],

          field: "uname",

          placeholder: "请输入用户名",
          icon: "el-icon-user-solid",
          type: "input",
        },
        {
          rules: [
            { required: true, message: "密码必须", trigger: "blur" },
            { min: 3, max: 15, message: "至少3~15个字符", trigger: "blur" },
          ],
          field: "pwd",

          placeholder: "请输入密码",
          icon: "el-icon-lock",
          type: "password",
        },
        // ...
      ],
      // 表单按钮组
      formBtns: [
        {
          icon: "el-icon-camera",
          type: "primary",
          click: () => console.log("扫码"),
        },
        {
          icon: "el-icon-mobile-phone",
          type: "primary",
          click: () => this.jump("/login/sms"),
        },
        {
          icon: "el-icon-s-claim",
          type: "primary",
          click: () => this.jump("/login/token"),
        },
        {
          content: "登录",
          type: "primary",
          click: async (formData) => {
            // console.log("表单数据", formData);
            // const res = await postLoginMbApi(formData);
            // // console.log("拿到后端数据：", res);
            // if (res.meta.state === 200) {
            //   this.$message.success(res.meta.msg);
            //   localStorage.setItem("uname", res.data.uname);
            //   localStorage.setItem("token", res.data.token);
            //   localStorage.setItem("roleName", res.data.roleName);
            //   this.jump("/");
            // } else {
            //   // 密保写错了、密码错了、用户不存在
            //   this.$message.error(res.meta.msg);
            // }

            const res = await this.login(formData);
            if (res.meta.state === 200) {
              this.$message.success(res.meta.msg);
              this.jump("/");
            } else {
              // 密保写错了、密码错了、用户不存在
              this.$message.error(res.meta.msg);
            }
          },
        },
        // {
        //   content: "创建/更新/重置",
        //   type: "primary/success/info/warning/danger",
        // },
        // {
        //   content: "创建/更新/重置",
        //   type: "primary/success/info/warning/danger",
        // },
      ],
      // ...
    };
  },
  methods: {
    ...mapActions({
      login: "user/FETCH_MB_LOGIN",
    }),
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;

  display: flex;
  justify-content: center;
  align-items: center;

  .container {
    width: 300px;
    h1 {
      color: #fff;
      font-size: 50px;
      margin-bottom: 15px;
    }
    :deep(.el-select) {
      width: 100% !important;
    }
    :deep(.el-button) {
      width: 30px;
      i {
        margin-left: -8px;
      }
      &:last-child {
        width: calc(100% - 160px);
      }
    }
  }
}
</style>
